import React from 'react'
import $ from 'jquery'
import {saveAccountApi} from '../apis/validApis/account'
import Tooltip from 'lib/components/tooltip.jsx';
import CopyClipboard from 'lib/components/CopyClipboard.jsx';

export default class SetupView extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      app:BlueWare.setup_plat?{name:BlueWare.setup_appname,token:BlueWare.setup_token}:null,
      msg:null,
      saving:false,
      ANDROID_AGENT_url: document.getElementById('ANDROID_AGENT_DOWNLOAD_URL').value,
      ANDROID_ECLIPSE_LT_4_4_url: document.getElementById('ANDROID_ECLIPSE_DOWNLOAD_URL_LT_4_4').value,
      ANDROID_ECLIPSE_GT_4_4_url: document.getElementById('ANDROID_ECLIPSE_DOWNLOAD_URL_GT_4_4').value,
      ANDROID_GRADLE_url: document.getElementById('ANDROID_GRADLE_DOWNLOAD_URL').value,
      ANDROID_MAVEN_url: document.getElementById('ANDROID_MAVEN_DOWNLOAD_URL').value,
      IOS_url: document.getElementById('IOS_AGENT_DOWNLOAD_URL').value,
      IOS_BETA_XCODE_6_url: 'https://download.oneapm.com/ios_agent/Agent_iOS_V2.0.0.zip',
      IOS_BETA_XCODE_7_url: 'https://download.oneapm.com/ios_agent/BitCode_Agent_iOS_V2.0.0.zip'
    }
    this.save = this.save.bind(this)
    this.getToken = this.getToken.bind(this);
  }

  getToken() {
    if (this.state.app && this.state.app.token) {
      return this.state.app.token;
    } else {
      return '---<YOU TOKEN HERE>---';
    }
  }

  save(){
    var _this = this
    if(this.state.saving){
      return ;
    }
    saveAccountApi({
      name:$(this.refs.appName).val(),
      platform:this.props.platform
    }).post().then(function(res,params){
      if(res.token){
        _this.setState({
          app:{
            name:params.name,
            token:res.token
          }
        })
        _this.props.afterSave()
      }else{
        _this.setState({
          saving:false,
          msg:'保存失败'
        })
      }
    },function(err){
      _this.setState({
        saving:false,
        msg:err.msg||err.message //'保存失败'
      })
    },function(){
      _this.setState({
        saving:true,
        msg:null
      })
    })
  }
  renderForm(){
    if(this.state.app){
      return (
        <div className="form-group horizontal">
          <ul>
            <li>
              <label className="control-label">App 名称</label>
              <span className="vetically-center">{this.state.app.name}</span>
              </li>
            <li>
              <label className="control-label">App Token</label>
              <code className="code-copy" style={{ float: 'none', width: 'auto', position: 'relative' }}>
                {
                  this.state.app.token
                }
                <CopyClipboard text={ this.state.app.token }>
                  <i
                    ref="tokenNode"
                    className="iconfont"
                    data-tip="点击复制 App Token 到剪切板"
                    style={{
                      float: 'right',
                      marginLeft: '20px',
                      marginRight: '-24px',
                      color: '#aaa',
                      position: 'relative'
                    }}>
                    &#xe69c;
                  </i>
                </CopyClipboard>
              </code>
            </li>
          </ul>
        </div>
      )
    }
    if(BlueWare.limitSetup){
      return (
        <div className="form-group horizontal">
          <ul>
            <li>
              <span className="msg-error">您的应用数量已达上限，不能再监控新的 APP</span>
            </li>
          </ul>
        </div>
      )
    }
    return (
      <div className="named">
        <input className="input-text" type="text" ref="appName" />
        {
          this.state.saving?(
            <span className="saving">保存中 . . . </span>

          ):(
            <button className="btn-green" type="button" onClick={this.save} >保存</button>
          )
        }
        <p className="note-attention" style={{marginTop:'10px'}}>为你的应用命名后生成对应的 Token。<br />注意：包名不同的应用不可使用同一Token。</p>
        {
          this.state.msg?(
            <span className="msg-error">{this.state.msg}</span>
          ):null
        }
      </div>
    )
  }
  render(){
    return null
  }
}
SetupView.defaultProps = {
  afterSave:function(){}
}
